
.hr {
    width: 100%;
}

.vr {
    height: 100%;
}

/* flex相关布局 */
.flex {
    display: flex;
    flex-direction: column;
    position: relative;
}

.flex.wrap {
    flex-wrap: wrap;
}

.flex.row {
    flex-direction: row;
    flex-wrap: wrap;
}

.flex.column {
    flex-direction: column;
    flex-wrap: nowrap;
}

.flex.row.nowrap {
    flex-wrap: nowrap;
}

.flex.full {
    flex-grow: 1;
}

.flex.column > .full {
    height: 0;
}

.flex.row > .full {
    width: 0;
}

.flex.column > .full.scroll {
    overflow-y: auto;
}

.flex.row > .full.scroll {
    overflow-x: auto;
}

.flex.center {
    justify-content: center;
    align-items: center;
}

.flex.column .top {
    justify-content: flex-start;
}

.flex.column .bottom {
    justify-content: flex-end;
}

.flex.column .left {
    align-items: flex-start;
}

.flex.column .right {
    align-items: flex-end;
}

.flex.row .top {
    align-items: flex-start;
}

.flex.row .bottom {
    align-items: flex-end;
}

.flex.row .left {
    justify-content: flex-start;
}

.flex.row .right {
    justify-content: flex-end;
}

/* flex相关布局 */